<template>
    <div class="operationMenu">
        <!-- 知识库底部菜单 -->
        <van-tabbar inactive-color="#a5aeb7" z-index="2000" v-if="isKnowledge">
            <van-tabbar-item  @click="handleDownload">
                <span>下载</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/xiazai.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleKnowledgeTreeRemove">
                <span>移除</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/sahnchu.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleKnowledgeTreeCollection" v-show="!isFavourite">
                <span>收藏</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/collectionMenu.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="KnowledgeTreeCancelCollection" v-show="isFavourite">
                <span>取消收藏</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/cancelCollection.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

        <!-- 收藏底部菜单 -->
        <van-tabbar inactive-color="#a5aeb7" z-index="2000" v-else-if="Favourite">
            <!-- <van-tabbar-item>
                <span>分享</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/fenxiang.png')" />
                </template>
            </van-tabbar-item> -->
            <van-tabbar-item @click="handleCancelCollection">
                <span>取消收藏</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/cancelCollection.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

        <!-- 分享底部菜单 -->
        <van-tabbar inactive-color="#a5aeb7" z-index="2000" v-else-if="isShare">
            <van-tabbar-item @click="handleDownload">
                <span>下载</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/xiazai.png')" />
                </template>
            </van-tabbar-item>
            <!-- <van-tabbar-item >
                <span>收藏</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/collectionMenu.png')" />
                </template>
            </van-tabbar-item> -->
            <van-tabbar-item @click="handleShareRemove" v-if="!isFriendShare">
                <span>移除</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/remove.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

        <!-- 最新访问底部菜单 -->
        <van-tabbar inactive-color="#a5aeb7" z-index="2000" v-else-if="isRecent">
            <van-tabbar-item @click="handleDownload">
                <span>下载</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/xiazai.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleKnowledgeTreeCollection" v-show="!isFavourite">
                <span>收藏</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/collectionMenu.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="KnowledgeTreeCancelCollection" v-show="isFavourite">
                <span>取消收藏</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/cancelCollection.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

        <!-- 回收站底部菜单 -->
        <van-tabbar inactive-color="#a5aeb7" z-index="2000" v-else-if="isRecycle">
            <van-tabbar-item @click="handleRecoveryClick">
                <span>恢复</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/recovery.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleDeleteClick">
                <span>彻底删除</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/sahnchu.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleEmptyClick">
                <span>清空</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/empty.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>
        
        <!-- 我的审核底部操作菜单 -->
        <van-tabbar inactive-color="#a5aeb7" z-index="2000" v-else-if="isExamine">
            <van-tabbar-item @click="handleDelete">
                <span>删除</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/sahnchu.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

        <!-- 底部操作菜单 -->
        <van-tabbar inactive-color="#a5aeb7" z-index="2000" v-else>
            <van-tabbar-item @click="shareToClick" v-show="checkArr.length == 1">
                <span>分享</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/fenxiang.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="AddKnowledgeClick">
                <span>添加到知识库</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/addKnowledge.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleDelete">
                <span v-if="currentTitle == '部门文档' || '个人文档'">移除</span>
                <span v-else>删除</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/sahnchu.png')" />
                </template>
            </van-tabbar-item>
            <van-tabbar-item @click="handleSheetVisible" v-show="isMore">
                <span>更多</span>
                <template #icon>
                    <van-image width="22" height="22" fit="scale-down" :src="require('assets/images/gengduo.png')" />
                </template>
            </van-tabbar-item>
        </van-tabbar>

        <!-- 底部菜单更多操作面板 -->
        <van-action-sheet v-model="sheetShow" title="操作">
            <div class="sheetContent">
                <van-cell title="取消收藏" size="large" clickable v-show="!isCollection" @click="KnowledgeTreeCancelCollection">
                    <template #icon>
                        <van-image class="sheetImg" width="12" height="12" fit="scale-down" :src="require('assets/images/menu-cancelCollection.png')" />
                    </template>
                </van-cell>
                <van-cell title="收藏" size="large" clickable v-show="isCollection" @click="handleKnowledgeTreeCollection">
                    <template #icon>
                        <van-image class="sheetImg" width="12" height="12" fit="scale-down" :src="require('assets/images/menu-Collection.png')" />
                    </template>
                </van-cell>
                <van-cell title="下载" size="large" clickable @click="handleDownload">
                    <template #icon>
                        <van-image class="sheetImg" width="12" height="12" fit="scale-down" :src="require('assets/images/menu-xiazai.png')" />
                    </template>
                </van-cell>
            </div>
        </van-action-sheet>
        

        <!-- 底部菜单分享面板 -->
        <van-action-sheet v-model="shareToShow" title="分享">
            <div class="sheetContent shareToContent shareOuter">
                <van-tabs animated line-width="0" line-height="0" title-active-color="#fff" title-inactive-color="#0099ff" :border="false">
                    <van-tab title="链接分享">
                        <div class="shareTotop">分享方式</div>

                        <van-radio-group v-model="shareToRadio" direction="horizontal">
                            <van-radio name="有码分享" icon-size="14px">有码分享</van-radio>
                            <van-radio name="无码分享" icon-size="14px">无码分享</van-radio>
                        </van-radio-group>

                        <van-field v-model="shareData.onlyCode" readonly :border="false">
                            <template #extra>
                                <van-button size="small" type="default" class="shareLink" @click="clipboardClick">复制链接</van-button>
                            </template>
                        </van-field>

                        <van-field v-model="shareData.extractionCode" :border="false" readonly v-show="shareToRadio == '有码分享'">
                            <template #extra>
                                <van-button size="small" type="default" class="shareLink" @click="clipboardClickBottom">复制提取码</van-button>
                            </template>
                        </van-field>
                    </van-tab>
                    
                    <van-tab title="指定好友/群组">
                        <div class="shareTotop">指定好友/群组</div>
                        
                        <van-button size="small" type="default" class="shareLink" @click="showSpecify">
                            指定好友/群组
                            <span style="display: inline-block;color: #a5aeb7;text-decoration: none;">({{chooseLength}})</span>
                        </van-button>
                    </van-tab>

                </van-tabs>

                <div class="shareTotop">
                    有效时间
                    <span style="display: inline-block;color: #a5aeb7;text-decoration: none;" v-show="divModel.trim() != ''">({{appointDay}})</span>
                </div>

                <van-radio-group v-model="shareToTimeRadio" direction="horizontal">
                    <van-radio class="shareToRadio" name="1" icon-size="14px">1天</van-radio>
                    <van-radio class="shareToRadio" name="3" icon-size="14px">3天</van-radio>
                    <van-radio class="shareToRadio" name="7" icon-size="14px">7天</van-radio>
                    <van-radio class="shareToRadio" name="永久有效" icon-size="14px">永久有效</van-radio>
                    <van-radio class="shareToRadio" :name="divModel" icon-size="14px" @click='shareToTimeRadioChange'>
                        指定<span class="divModel">{{divModel}}</span>天
                    </van-radio>
                </van-radio-group>

                <div class="shareBottom">
                    <van-button
                    type="info"
                    class="shareSubmit"
                    round
                    @click="shareSubmit"
                    >分享</van-button>
                </div>
    
            </div>
        </van-action-sheet>

        <!-- 分享指定多少天dialog -->
        <van-dialog
        class="divModel"
        v-model="divModelDialogVisible"
        title="有效时间"
        closeOnClickOverlay
        showCancelButton
        @confirm="divModelDialogVisible = false"
        @open="divModel = ''"
        >
            <van-field v-model="divModel" placeholder="有效时间" type="digit" @touchstart.native.stop="keyboardVisible = true" />
        </van-dialog>


        <!-- 指定好友/群组 -->
        <van-action-sheet v-model="SpecifyShow" title="选择好友" class="shareListOuter">
            <div class="sheetContent shareToContent chooseList">
                <van-tabs animated line-width="0" line-height="0" title-active-color="#fff" :border="false">
                    <van-tab title="好友">
                        <van-checkbox-group v-model="SpecifyFriend" v-if="!SpecifyFriend == []" max="10" @change="SpecifyFriendChange">
                            <van-cell-group>
                                <van-cell
                                size="large"
                                v-for="(item, index) in SpecifyFriendList"
                                clickable
                                :key="item.id"
                                :title="item.name"
                                @click="SpecifyFriendToggle(index)"
                                >
                                <template #icon>
                                    <van-checkbox :name="item.id" ref="SpecifyFriend" class="SpecifyCheck" icon-size="14px" />
                                </template>
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group>
                    </van-tab>
                    <van-tab title="群组">
                        <van-checkbox-group v-model="SpecifyGroup" v-if="!SpecifyGroup == []" max="10" @change="SpecifyGroupChange">
                            <van-cell-group>
                                <van-cell
                                size="large"
                                v-for="(item, index) in SpecifyGroupList"
                                clickable
                                :key="item.groupId"
                                :title="item.groupName"
                                @click="SpecifyGroupToggle(index)"
                                >
                                <template #icon>
                                    <van-checkbox :name="item.groupId" ref="SpecifyGroup" class="SpecifyCheck" icon-size="14px" />
                                </template>
                                </van-cell>
                            </van-cell-group>
                        </van-checkbox-group>
                    </van-tab>
                </van-tabs>
            </div>
        </van-action-sheet>

    <van-number-keyboard
    :show="keyboardVisible"
    v-model="divModel"
    @blur="keyboardVisible = false"
    z-index="9999"
    />
    </div>
</template>

<script>
export default {
    name: 'operationMenu',
    props: {
        // 是否为知识库
        isKnowledge: {
            type: Boolean,
            default: false
        },
        // 是否为收藏
        Favourite: {
            type: Boolean,
            default: false
        },
        // 是否为分享
        isShare: {
            type: Boolean,
            default: false
        },
        // 是否为好友分享
        isFriendShare: {
            type: Boolean,
            default: false
        },
        // 操作菜单id和treeId对象
        menuParameter: {
            type: Object,
            default: function() {
                return {}
            }
        },
        // 长按选中后的数组
        checkArr: {
            type: Array,
            default: function() {
                return []
            }
        },
        // 是否为最近访问页面
        isRecent: {
            type: Boolean,
            default: false
        },
        // 是否为我的审核
        isExamine: {
            type: Boolean,
            default: false
        },
        // 当前所在文件栏目，用于文件下的删除事件
        currentTitle: {
            type: String,
            default: ''
        },
        // 接收多选文件的参数， 用于文件的多选
        checkParameterArr: {
            type: Array,
            default: function() {
                return []
            }
        },
        // 是否为回收站
        isRecycle: {
            type: Boolean,
            default: false
        },
        // 单选时，所选是否收藏
        isFavourite: {
            type: Boolean,
            default: false
        }
    },
    data(){
        return {
            // 操作面板显示与隐藏
            sheetShow: false,
            isCollection: false,
            
            handleCollection: false,

            // 分享弹框
            shareToShow: false,
            shareData: {},
            shareToRadio: '有码分享',
            shareToTimeRadio: '1',

            divModelDialogVisible: false,
            divModel: '',

            // 指定好友/群组
            SpecifyShow: false,

            SpecifyFriend: [],
            SpecifyFriendList: [],
            SpecifyGroup: [],
            SpecifyGroupList: [],
            
            keyboardVisible: false,

        }
    },
    methods: {
        // 跳转收藏事件
        handleKnowledgeTreeCollection() {
            if(this.checkArr.length > 0) {
                this.$router.push({name: 'Collection', params: {resourcesId: this.menuParameter.resourcesId, type: this.menuParameter.type}})
            }
        },
        AddKnowledgeClick(){
            if(this.checkArr.length > 0) {
                this.$router.push({name: 'AddKnowledge', params: {resourcesId: this.menuParameter.resourcesId, type: this.menuParameter.type}})
            }
        },
        // 知识库移除事件
        handleKnowledgeTreeRemove() {
            this.$dialog.confirm({
                title: '提示',
                message: '是否将该文件从知识库中移除?'
            }).then(() => {
                this.$request({
                    method: 'post',
                    url: '/api/KnowledgeTree/DeleteFile?Token=' + sessionStorage.getItem("mobileToken"),
                    data: {
                        id: this.menuParameter.idArr,
                        treeId: this.menuParameter.treeId
                    }
                }).then(({data}) => {
                    // console.log(data)
                    if(data.code == 200){
                        this.$emit('handleRemoveMessage', true)
                        this.$notify({type:'success', message: data.msg})
                    }else{
                        this.$emit('handleRemoveMessage', false)
                        this.$notify({type:'danger', message: data.msg})
                    }
                })
            }).catch(() => {})
            
        },
        // 取消收藏
        KnowledgeTreeCancelCollection(){
            this.$dialog.confirm({
                title: '提示',
                message: '是否取消收藏?'
            }).then(() => {
                // console.log(this.menuParameter.resourcesId)
                this.$request({
                    method: 'post',
                    url: '/api/FavouriteTree/DisCollection?Token=' + sessionStorage.getItem("mobileToken"),
                    data: {
                        FavouritetreeFileId: this.menuParameter.resourcesId
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.$emit('KnowledgeTreeCancelCollection', true)
                        this.$notify({type:'success', message: data.msg})
                    }else{
                        this.$emit('KnowledgeTreeCancelCollection', false)
                        this.$notify({type:'danger', message: data.msg})
                    }
                })
            }).catch(() => {})
        },
        // 收藏页取消收藏
        handleCancelCollection(){
            // console.log(this.menuParameter)
            this.$dialog.confirm({
                title: '提示',
                message: '是否取消收藏?'
            }).then(() => {
                this.$request({
                    method: 'post',
                    url: '/api/FavouriteTree/DeleteFile?Token=' + sessionStorage.getItem("mobileToken"),
                    data: {
                        FavouritetreeFileId: this.menuParameter.idArr,
                        TreeId: this.menuParameter.treeId
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.$emit('handleCancelCollection', true)
                        this.$notify({type:'success', message: data.msg})
                    }else{
                        this.$emit('handleCancelCollection', false)
                        this.$notify({type:'danger', message: data.msg})
                    }
                })
            }).catch(() => {})
            
        },
        // 我的分享页移除分享
        handleShareRemove(){
            this.$dialog.confirm({
                title: '提示',
                message: '是否确认将此条分享记录删除?'
            }).then(() => {
                this.$request({
                    method: 'post',
                    url: '/api/Shared/CancelFielShare?Token=' + sessionStorage.getItem("mobileToken"),
                    data: {
                        SharedingId: this.checkArr[0]
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.$emit('handleShareRemove', true)
                        this.$notify({type:'success', message: "已成功移除此记录！"})
                    }else{
                        this.$emit('handleShareRemove', false)
                        this.$notify({type:'danger', message: '移除失败！'})
                    }
                })
            }).catch(() => {})
        },
        // 下载事件
        handleDownload(){
            // console.log(typeof(this.menuParameter.hdfsUrl))
            if(this.menuParameter.hdfsUrl == null){
                this.$notify({type:'danger', message: '此文件无法下载！'})
            }else{
                window.open(this.menuParameter.hdfsUrl)
            }
        },
        // 文件删除事件
        handleDelete(){
            if(this.checkArr.length > 0){
                // console.log(this.checkParameterArr)
                let fileIds = this.checkParameterArr.map(item => {
                    return item.fileId
                })
                let dirIds = this.checkParameterArr.map(item => {
                    return item.directoryId
                })
                fileIds.forEach((item, index) => {
                    if(item == null){
                        fileIds.splice(index, 1)
                    }
                })
                dirIds.forEach((item, index) => {
                    if(item == null){
                        dirIds.splice(index, 1)
                    }
                })
                if(fileIds[0] == null){
                    fileIds = []
                }
                if(dirIds[0] == null){
                    dirIds = []
                }
                // console.log(fileIds)
                // console.log(dirIds)

                let message = this.currentTitle == '部门文档' || '个人文档' ? '此操作会将文件或文件夹放入回收站, 是否继续?' : '此操作会将文件或文件夹删除, 是否继续?'
                this.$dialog.confirm({
                    title: '提示',
                    message
                }).then(() => {
                    let url = ''
                    switch(this.currentTitle){
                        case '个人文档':
                            url = '/api/General/DeletePersonalDocuments?Token=' + sessionStorage.getItem("mobileToken");
                            break;
                        case '部门文档':
                            url = '/api/General/DeleteDepartmentDocuments?Token=' + sessionStorage.getItem("mobileToken");
                            break;
                        case '群组文档':
                            url = '/api/General/DeleteGroupownerDocuments?Token=' + sessionStorage.getItem("mobileToken");
                            break;
                        case '公共文档':
                            url = '/api/General/DeletePublicDocuments?Token=' + sessionStorage.getItem("mobileToken");
                            break;
                        case '我的审核':
                            url = '/api/Approval/DeleteApprovalDocuments?Token=' + sessionStorage.getItem("mobileToken");
                            break;
                        default:
                            url = "/api/General/DeletePersonalDocuments?Token=" + sessionStorage.getItem("mobileToken");
                            break;
                    }
                    this.$request({
                        method: 'post',
                        url,
                        data: {
                            fileIds,
                            dirIds,
                            title: this.currentTitle
                        }
                    }).then(({data}) => {
                        if(data.code == 200){
                            this.$emit('onCancel', true)

                            this.$notify({type:'success', message: data.msg})
                        }else{
                            this.$notify({type:'danger', message: data.msg})
                        }
                    })
                }).catch(() => {})
            }
            
        },
        // 更多点击事件
        handleSheetVisible(){
            // 查找是否有选中已经收藏的文件
            let flag = this.checkParameterArr.find(item => item.isFavourite == true)
            // console.log(flag)
            if(flag == undefined){
                this.isCollection = true
            }else{
                this.isCollection = false
            }
            this.sheetShow = true
        },
        // 回收站恢复事件
        handleRecoveryClick(){
            this.$dialog.confirm({
                title: '提示',
                message: '是否将文件或文件夹进行恢复?'
            }).then(({data}) => {
                let fileIds = this.checkParameterArr.map(item => item.fileId)
                let dirIds = this.checkParameterArr.map(item => item.directoryId)
                if(fileIds[0] == null){
                    fileIds = []
                }
                if(dirIds[0] == null){
                    dirIds = []
                }
                this.$request({
                    method: 'post',
                    url: '/api/Recycle/Recover?Token=' + sessionStorage.getItem("mobileToken"),
                    data: {
                        fileIds,
                        dirIds 
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.$emit('handleRecoveryClick', true)
                        this.$notify({type:'success', message: data.msg})
                    }else{
                        this.$emit('handleRecoveryClick', false)
                        this.$notify({type:'danger', message: data.msg})
                    }
                })
            }).catch(() => {})
        },
        // 回收站彻底删除事件
        handleDeleteClick(){
            this.$dialog.confirm({
                title: '提示',
                message: '是否将文件或文件夹永久删除?'
            }).then(({data}) => {
                let fileIds = this.checkParameterArr.map(item => item.fileId)
                let dirIds = this.checkParameterArr.map(item => item.directoryId)
                if(fileIds[0] == null){
                    fileIds = []
                }
                if(dirIds[0] == null){
                    dirIds = []
                }
                this.$request({
                    method: 'post',
                    url: '/api/Recycle/Delete?Token=' + sessionStorage.getItem("mobileToken"),
                    data: {
                        fileIds,
                        dirIds 
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.$emit('handleRecoveryClick', true)
                        this.$notify({type:'success', message: data.msg})
                    }else{
                        this.$emit('handleRecoveryClick', false)
                        this.$notify({type:'danger', message: data.msg})
                    }
                })
            }).catch(() => {})
        },
        // 回收站清空事件
        handleEmptyClick(){
            this.$dialog.confirm({
                title: '提示',
                message: '是否将回收站所有文件或文件夹清空?'
            }).then(({data}) => {
                this.$request({
                    method: 'post',
                    url: '/api/Recycle/Empty?Token=' + sessionStorage.getItem("mobileToken"),
                }).then(({data}) => {
                    if(data.code == 200){
                        this.$emit('handleRecoveryClick', true)
                        this.$notify({type:'success', message: data.msg})
                    }else{
                        this.$emit('handleRecoveryClick', false)
                        this.$notify({type:'danger', message: data.msg})
                    }
                })
            }).catch(() => {})
        },
        // 底部分享点击事件
        shareToClick(){
            this.shareToShow = true
            this.$request({
                url: '/api/SharedGroup/GetOnlyCode?Token='+sessionStorage.getItem("mobileToken"),
                // params: {
                //     Token: sessionStorage.getItem("mobileToken")
                // }
            }).then(({data}) => {
                if(data.code == 200){
                    this.shareData = data.data
                }else{
                    this.$notify({type:'danger', message: data.msg})
                }
            })
        },
        // 时间转换函数
        formatDate(time){
            function addZero(num) {
                return num < 10 ? '0' + num : num;
            }
            let date = new Date(time);
            let year = date.getFullYear();
            let month = addZero(date.getMonth() + 1);
            let day = addZero(date.getDate());

            return `${year}-${month}-${day}`
        },
        // 
        shareToTimeRadioChange(val){
            this.divModelDialogVisible = true
        },
        // 指定好友/群组
        showSpecify(){
            // 指定好友请求
            this.$request({
                method: 'post',
                url: '/api/SharedGroup/SelectEmp?Token='+sessionStorage.getItem("mobileToken"),
            }).then(({data}) => {
                if(data.code == 200){
                    this.SpecifyFriendList = data.data
                }else{
                    this.$notify({type:'danger', message: data.msg})
                }
            })
            // 指定群组请求
            this.$request({
                method: 'post',
                url: '/api/SharedGroup/GetSharedGroup?Token='+sessionStorage.getItem("mobileToken"),
            }).then(({data}) => {
                if(data.code == 200){
                    this.SpecifyGroupList = data.data.dataList
                }else{
                    this.$notify({type:'danger', message: data.msg})
                }
            })

            this.SpecifyShow = true
        },
        // cell选择复选框事件
        SpecifyFriendToggle(index){
            if(this.SpecifyFriend.length + this.SpecifyGroup.length > 10){
                this.$notify({type: 'warning', message: '最多选择10个群组/好友!'})
            }else{
                this.$refs.SpecifyFriend[index].toggle();
            }
        },
        SpecifyFriendChange(arr){
            if(arr.length >= 10) return this.$notify({type: 'warning', message: '最多选择10个群组/好友!'})
        },
        SpecifyGroupToggle(index){
            this.$refs.SpecifyGroup[index].toggle();
        },
        SpecifyGroupChange(arr){
            // console.log(arr)
            if(arr.length >= 10) return this.$notify({type: 'warning', message: '最多选择10个群组/好友!'})
        },
        // 分享提交事件
        shareSubmit(){
            if(this.checkArr.length > 0){
                let FileId = String(this.menuParameter.resourcesId)
                let Shareingidemp = this.SpecifyFriend
                let ShareingidGrp = this.SpecifyGroup

                let times = new Date().getTime() + Number(this.shareToTimeRadio)*24*3600*1000
                let Expires = this.formatDate(times)
                // console.log(Expires)
                if(this.shareToTimeRadio == '永久有效'){
                    Expires = ''
                }
                if(this.shareToRadio == '无码分享'){
                    this.shareData.extractionCode = ''
                }
                this.$request({
                    method: 'post',
                    url: '/api/Shared/AddShared?Token='+sessionStorage.getItem("mobileToken"),
                    data: {
                        FileId, //  文件id
                        DirectoryId: '', // 文件夹ID
                        ExtractionCode: this.shareData.extractionCode,   //  文件密码
                        OnlyCode: this.shareData.url,    // 文件唯一码
                        Url: this.shareData.onlyCode, // 链接
                        Expires,  //失效时间
                        Shareingidemp,  // 分享人的ID列表
                        ShareingidGrp   // 分享组的ID列表
                    }
                }).then(({data}) => {
                    if(data.code == 200){
                        this.$notify({type:'success', message: '分享成功！'})
                    }else{
                        this.$notify({type:'danger', message: data.msg})
                    }
                    this.shareToShow = false
                    this.SpecifyShow = false
                })
            }
        },
        // 复制功能
        clipboardClick(){
            this.$copyText(this.shareData.onlyCode).then(res => {
                // console.log(res)
                this.$notify({type: 'success', message: "已成功复制，可直接去粘贴"})
            },err => {
                this.$notify({type: 'danger', message: "复制失败"});
            })
        },
        // 复制功能
        clipboardClickBottom(){
            this.$copyText(this.shareData.extractionCode).then(res => {
                // console.log(res)
                this.$notify({type: 'success', message: "已成功复制，可直接去粘贴"})
            },err => {
                this.$notify({type: 'danger', message: "复制失败"});
            })
        }
    },
    computed: {
        isMore() {
            if(this.checkArr.length > 1){
                return false
            }else{
                return true
            }
        },
        chooseLength(){
            return `共选择了${this.SpecifyFriend.length + this.SpecifyGroup.length}个`
        },
        // 显示输入的指定多少天
        appointDay(){
            return `${this.divModel}天`
        }
    },
    watch:{
        shareToShow(newVal){
            if(newVal){
                this.shareToRadio = '有码分享'
                this.shareData = []
                this.shareToTimeRadio = '1'
            }
        },
        // SpecifyShow(newVal){
        //     if(!newVal){
        //         this.SpecifyFriend = []
        //         this.SpecifyGroup = []
        //     }
        // }  
    }
}
</script>

<style lang="less" scoped>
.operationMenu /deep/ .van-tabbar{
  height: 49px;
  background-color: #0099ff;
}
.operationMenu /deep/ .van-tabbar-item__icon{
    margin-bottom: 0;
}
.operationMenu /deep/ .van-tabbar-item__text span{
    display: block;
    font-size: 9px;
    transform: scale(.75);
    transform-origin: top;
    color: #ffffff;
}
.operationMenu /deep/ .van-uploader{
    display: flex;
}

.sheetContent /deep/ .van-cell{
    align-items: center;
}
.chooseList /deep/ .van-tab--active{
    background-color: #0099ff;
}
.chooseList /deep/ .van-tab{
        border: 1px solid #0099ff;
}
.chooseList /deep/ .van-tabs__content{
    height: 43vh;
    overflow-y: scroll;
}
.chooseList /deep/ .van-action-sheet__cancel{
    background-color: #0099ff;
    color: #fff;
}

.shareOuter /deep/ .van-tab--active{
    background-color: #0099ff;
    border-radius: 30px;
}
.shareOuter /deep/ .van-tab{
    padding: 0 20px;
    flex: initial;
}
.shareOuter /deep/ .van-tabs__content{
    min-height: 149px;
}
.shareOuter /deep/ .van-action-sheet__cancel{
    background-color: #0099ff;
    color: #fff;
}

.sheetContent{
    padding: 10px 0 30px;
}
.sheetImg{
    margin-right: 5px;
}
.sheetContent /deep/ .van-cell__title{
    color: #2a2b2d;
    font-size: 12px;
}

.shareToContent /deep/ .van-radio__icon{
    height: auto;
}
.shareToContent /deep/ .van-radio__label{
    font-size: 12px;
    color: #2a2b2d;
}
.shareToContent /deep/ .van-checkbox{
    overflow: initial;
}
.shareToContent{
    padding-left: 15px;
    padding-right: 15px;
    .shareTotop{
        font-size: 12px;
        color: #a5aeb7;
        margin: 10px 0 20px;
        font-weight: 600;
    }
    .shareLink{
        border: none;
        font-size: 12px;
        color: #0099ff;
        text-decoration: underline;
        padding: 0;
    }
    .shareToRadio{
        margin: 10px 15px 10px 0;
        .divModel{
            display: inline-block;
            min-width: 10px;
            height: 100%;
            border-bottom: 1px solid #2a2b2d;
        }
    }
    .shareBottom{
        text-align: center;
        .shareSubmit{
            margin-top: 25px;
            width: 73.33%;
            height: 35px;
        }
    }
    .SpecifyCheck{
        margin-right: 15px;
    }
}

.shareListOuter /deep/ .van-action-sheet__close{
    line-height: 1.4;
    color: #333;
}
.shareListOuter /deep/ .van-icon-cross::before{
    content: "确定";
    font-size: 14px;
 }
 .shareOuter /deep/ .van-tabs--line .van-tabs__wrap{
     height: 23px;
 }
 .chooseList /deep/ .van-tabs--line .van-tabs__wrap{
     height: 30px;
 }
 .shareOuter /deep/ .van-tabs__wrap{
     margin-bottom: 10px;
 }
 .shareOuter /deep/ .van-cell{
     padding: 5px 16px;
 }
</style>